<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editable Table Sample</title>
    <link type="text/css" rel="stylesheet" href="../../lib/editable-table/editable-table-jdk.css" />
    <style>
        /** {margin:0;padding:0}*/
        * {font-size:16px}
        .column-a {width: 200px;/*height:40px;line-height: 40px*/}
        .column-b {width: 300px;/*height:40px;line-height: 40px*/}
        .text-editor {font-size:14px;}
        .edit-table-header {color:#ccc;background-color:#666;}
    </style>
</head>
<body>
<div id="root-container"></div>
<script type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../lib/editable-table/editable-table-jdk.js"></script>
<script>
$(function () {
    var i, table = EditableTable.install ({
        container:'#root-container',
        columns:3,
        commands:['insert', 'remove', 'move-up', 'move-down', 'move-top', 'move-bottom'],
        rows:4,
        selectable:true,
        tableColumns:[
            {header:'#'},
            {header:'Age',className:'column-a'},
            {header:'Name',className:'column-b'}
/*
            {header:'Column A',className:'column-a'},
            {header:'Column B',className:'column-b'}
*/
        ]
    }), data = []/*, model = (function (table) {
        var model = table.getModel ();
        model.getRowCount = function () {
            return data.length;
        };
        model.getColumnCount = function () {
            return 3;
        };
        model.isCellEditable = function (row, column) {
            return column != 0;
        };
        model.getValueAt = function (row, column) {
            if (row < data.length && row >= 0) {
                var o = data [row];
                if (o) {
                    switch (column) {
                        case 0: return o ['id']; break;
                        case 1: return o ['age']; break;
                        case 2: return o ['name']; break;
                        default: return undefined;
                    }
                }
            }
        };
        model.setValueAt = function (row, column, value) {
            if (row >= 0 && row < this.getRowCount ()) {
                var o = data [row];
                switch (column) {
                    case 1: o ['age'] = parseInt (value, 10); break;
                    case 2: o ['name'] = value; break;
                }
            }
        };
        return model;
    })(table)*/;
/*
    for (i = 0; i < 10; i ++) {
        data.push ({id:i + 1,name:'name #' + (i + 1),age:Math.floor(Math.random() * 20 + 20)});
    }
    model.fireTableDataChanged ();
*/

});
</script>
</body>
</html>